<template>
	
	<view class="content">
					<view class="top0">
						<view class="top1" @click="tabClick(0)" :class="{top2: tabCurrentIndex === 0}">
							待完成
						</view>
						<view class="top1" @click="tabClick(1)" :class="{top2: tabCurrentIndex === 1}">
							已完成
						</view>
					</view>
					
					<!-- 空白页 -->
					<!-- 订单列表 -->
					<view v-for="(item,index) in  orderList.order" :key="index" @tap.stop="orderinfo(item.id)" class="order-item">
						<view class="i-top b-b">
							<text class="time ft14">{{item.order_on}}</text>
							<text class="state ft14" :style="{color: item.stateTipColor}">{{item.state_text}}</text>
						</view>
						<view class="pici">
							批次：{{item.batch}}
						</view>
						<view class="pici">
							创建时间：{{item.addtime_text}}
						</view>
						<view class="pici">
							结束地址：{{item.end_address}}
							<text class="daohang" @click="toMap(item.end_latitude,item.end_longitude,item.address)">
								导航
							</text>
						</view>
						
						<view class="price-box ft12" v-if="item.state == 1">
							<button class="action-btn recom" @tap.stop="song(item.id)">确认送达</button>
						</view>
						<view class="price-box ft12" >
							共<text class="num ft12">{{item.goods_num}}</text>件商品 
						</view>
					</view>
					
	

	</view>
</template> 
<script>
	export default {
		data() {
			return {
				limit:10,
				page:1,
				tabCurrentIndex: 0,
				orderList:{
					money:{},
					order:[]
				}
			};
		},
		
		onLoad(options){
			this.loadData()
		},
		onReachBottom() {
			this.page++;
			this.loadData()
		},
		methods: {
			
			toMap(latitude,longitude,address) { 
				console.log('点击地图') 
				uni.openLocation({ 
					   latitude: Number(latitude), //要去的纬度
					   longitude: Number(longitude), //要去的经度 
					   address: address, //要去的具体地址 
				}) 
			},
	
			//获取订单列表
			loadData(source){
				this.$ajax('post','driver.index/s_index',{driver_state:0,page:this.page,type:this.tabCurrentIndex}).then(res=>{
					this.orderList.money=0
					 this.orderList.order.push(...res.data.order)
				})
					
			}, 
			song(id){  
				var this_=this
				uni.showModal({
					title: '温馨提示',
					content: '是否确认送达',
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if (res.confirm) {
							this_.$ajax('post','driver.order/s_confirm',{
								id:id
							}).then(e=>{
								this_.page=1;
								this_.orderList.order=[];
								this_.loadData()
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			pay(oid){
				uni.navigateTo({
					url:'/pages/client/shop/buy?oid='+oid
				})
			},
			tabClick(index){
					this.tabCurrentIndex = index;
					this.page=1;
					this.orderList.order=[];
					this.loadData()
			},
			orderinfo(id){
				uni.navigateTo({
					url:'/pages/client/siji/s_order_info?id='+id
				})
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item{
		height: auto;
	}
	.order-item{
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;
		.i-top{
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right:30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;
			.time{
				flex: 1;
			}
			.state{
				color: $base-color;
			}
			.del-btn{
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;
				&:after{
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		/* 多条商品 */
		.goods-box{
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;
			.goods-item{
				width: 160upx;
				height: 160upx;
				display: inline-block;
				margin-right: 24upx;
			}
			.goods-img{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 6upx;
			}
		}
		/* 单条商品 */
		.goods-box-single{
			display: flex;
			padding: 20upx 0;
			.goods-img{
				display: block;
				width: 160upx;
				height: 160upx;
				border-radius: 6upx;
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;
				.title{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}
				.attr-box{
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}
				.price{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					&:before{
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}
		
		.price-box{
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			.num{
				margin: 0 8upx;
				color: $font-color-dark;
			}
			.price{
				font-size: 24upx;
				color: $font-color-dark;
				&:before{
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}
		.action-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}
		.action-btn{
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			&:after{
				border-radius: 100px;
			}
			&.recom{
				background: #fff9f9;
				color: $base-color;
				&:after{
					border-color: #f7bcc8;
				}
			}
		}
	}
	
	
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	.b-b:after {
	    bottom: 0;
	}
	.b-b:after, .b-t:after {
	    position: absolute;
	    z-index: 3;
	    left: 0;
	    right: 0;
	    height: 0;
	    content: '';
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    border-bottom: 1px solid #E4E7ED;
	}
	.b-t:after {
	    top: 0;
	}
	.b-b:after, .b-t:after {
	    position: absolute;
	    z-index: 3;
	    left: 0;
	    right: 0;
	    height: 0;
	    content: '';
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    border-bottom: 1px solid #E4E7ED;
	}
	.order-item .action-btn{
	    width: 80px;
	    height: 30px;
	    margin: 0;
	    margin-left: 12px;
	    padding: 0;
	    text-align: center;
	    line-height: 30px;
	    font-size: 13px;
	    color: #303133;
	    background: #fff;
	    -webkit-border-radius: 100px;
	    border-radius: 100px;
		border: 1px solid rgba(0,0,0,.2);
	}
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}
	.top0{
		width: 100%;
		display: flex;
	}
	.top1{
		width: 50%;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 40px;
		height: auto;
	}
	.top2{
		color: #01B750;
		border-bottom:1px solid #01B750;
	}
	.pici{
		font-size: 14px;
		width: 100%;
		line-height: 20px;
	}
	.daohang{
		font-size: 14px;
		color: red;
		width: 10%;
		margin-left: 10px;
	}
</style>
